<script>
	// 渠道列表页，弹窗会另抽出组件
	import {
		defineComponent
	} from 'vue'
	export default defineComponent({
		name: 'WeworkQrList'
	})
</script>
<script setup>
import {reqMaterialGroupAdd,reqMaterialGroupList,reqMaterialList} from '@/api'
import { toRaw } from '@vue/reactivity';
import {materialPicDataList} from '@/data'
	import UpdateGroupDialog from './pic/updateGroupDialog.vue'
	import DeleGroupDialogue from './pic/deleGroupDialogue.vue'
		import UpdateDialog from './pic/updateDialog.vue'
  import DeleDialogue from './pic/deleDialogue.vue'
	 import EditPic from './pic/editPic.vue'
import Upload from '@/components/app/uploadMaterial.vue'
  
  import MyIcon from '@/components/my-icon/index.vue'
  import { Search } from "@element-plus/icons-vue";
	import {
		ref
	} from 'vue'
	// group
import ChooseMaterial from '@/components/app/chooseMaterial.vue'
const chooseMaterial = ref()
const showMaterialDia = ()=>{
chooseMaterial.value.show(1,[])
}
const getMaterialData = (val) => {
	console.log(val,'getMaterialData')
}
const props = defineProps({
	// 1: 图片 2:视频 3:语音 4:混剪 5:文本, 默认1
	type: {
		type: Number,
		default: 1
	},
})
	const emits = defineEmits(['showEditQr'])
	const groupList = ref([])
	const groupName = ref('')
const isRefresh = ref(true)
const handleRefresh= () => {
	isRefresh.value = false
	isRefresh.value = true
}
  
  const tableData = ref([])
	const updateGroupDialog = ref(null)
	const deleGroupDialogue = ref(null)
		const updateDialog = ref(null)
	const deleDialogue = ref(null)
	const editPic = ref(null)
	const isShowAddGroupName = ref(false)
	const activeGroupIndex = ref(0)
	const hoverGroupIndex = ref('')

  const total = ref(0)
	const searchVal = ref('')
	let tempTableSelectArr = []
	const getUploadImg = (val)=>{
		console.log(val,'asdasd')
		getDataList()
	}
	const handleSelect= (idx) => {
		var arr = toRaw(tableData.value)
		let isExist = tempTableSelectArr.includes(arr[idx])
		if (isExist) {
			var obj = arr.find(item=>{
				return item.id == arr[idx].id
			})
			console.log(obj)
			arr.forEach(item=>{
				if (parseInt(item.selectIndex)>parseInt(obj.selectIndex)){
					item.selectIndex = (parseInt(item.selectIndex) - 1 +'').length>1?(parseInt(item.selectIndex) - 1 +''):'0'+(parseInt(item.selectIndex) - 1 +'')
				}
			})
			tempTableSelectArr = tempTableSelectArr.filter(item=>item.id!=arr[idx].id)
			arr[idx].selectIndex = '0'
		}else{
			tempTableSelectArr.push(arr[idx])
			console.log(arr[idx].selectIndex)
			arr[idx].selectIndex = (tempTableSelectArr.length+'').length>1?(tempTableSelectArr.length+''):'0'+(tempTableSelectArr.length+'')
			console.log(arr[idx].selectIndex,'yiui')
		}
		console.log(arr)
		tableData.value = arr
		console.log(tableData.value)
	}

	const handleChangegroupName = () => {
		const r = reqMaterialGroupAdd(
			{
				title:groupName.value,
				gs_type:props.type
			}
		)
		getGroupList()
	}
	const getGroupList = async() => {
		console.log('asdasaaaaaaaaa')
		

		const { data } = await reqMaterialGroupList({
			gs_type:props.type
		})

		groupList._value = data
		handleRefresh()

		activeGroupIndex.value = 0
		getDataList()
  }
  const getDataAll = async()=>{
		isRefresh.value = false
		console.log('asdasd')
		
		const { data } = await reqMaterialGroupList({
			gs_type:props.type
		})
		
		groupList._value = data
		console.log(groupList.value,data,'u9879789')
		const r = await reqMaterialList({
			group_id:groupList.value[activeGroupIndex.value].id,
			gs_type:props.type,
			size:999,
			name:searchVal.value,
		})
		var arr = []
		r.data.items.forEach(item=>{
			var obj = Object.assign(item,{isSelect:false,hoverIndex:false})
			// obj.
			arr.push(obj)
		})
		tableData._value = arr
		total.value= r.data.count
		isRefresh.value = true

	}
	const getDataList = async()=>{
		isRefresh.value = false
		const r = await reqMaterialList({
			group_id:groupList.value[activeGroupIndex.value].id,
			gs_type:props.type,
			size:999,
			name:searchVal.value,
		})
		var arr = []
		r.data.items.forEach(item=>{
			var obj = Object.assign(item,{isSelect:false,hoverIndex:false})
			// obj.
			arr.push(obj)
		})
		total.value = r.data.count
		tableData._value = arr
		isRefresh.value = true
	}
  // getGroupList()
  getDataAll()
	const handleCurrentChange = (val) => {
		console.log(`current page: ${val}分页请求接口`)
		getDataList()
	} 
  
	const showDialog = (name, val) => {
		switch (name) {
			case 'updateGroup':
				updateGroupDialog.value.show(val)
				break;
			case 'deleGroup':
				deleGroupDialogue.value.show(val)
				break;
				case 'dele':
					console.log('asdasdasdasdasd')
				deleDialogue.value.show(val)
				break;
			case 'show':
			window.open(val.url)
			break;
		case 'editPic':
			editPic.value.show(val)
			break;
				case 'updateName':
			updateDialog.value.show(val)
			break;
		
		}
	}
	const handle = (name, val) => {
		console.log('操作', name, val)
		switch (name) {
			case 'data':
				break;
			case 'detail':
				break;
			case 'download':
				break;
			case 'update':
				break;
			case 'delete':
				break;
		}
		updateGroupDialog.value.show(val)
	}
</script>

<template>
	<div class="app-container">
		<div class="pic-main">
			<div class="pic-main-left-nav app-container-radius">
				<div class="app-title-underline app-flex-left app-container" @click="isShowAddGroupName=true">
					<MyIcon class="app-icon app-pointer" name="AntDesignPlusSquare" />
					<span class="app-gap-words-left-s app-pointer">添加分组</span>
				</div>
				<div class="" v-if="isRefresh">
					<div v-show="isShowAddGroupName" class="app-container-side app-gap-block-top">
						<el-input v-on:keyup.enter="handleChangegroupName" v-model="groupName" maxlength="18" placeholder="输入名称后回车"
							show-word-limit type="text" />
					</div>

					<div class="app-gap-block-top " v-if="isRefresh" :class="isShowAddGroupName?'cell-list-show-input':'cell-list'">
						<div @mouseover="hoverGroupIndex=index"
							@click="activeGroupIndex=index;isShowAddGroupName=false;getDataList();"
							:class="[activeGroupIndex == index?'left-bar-cell-active':'left-bar-cell',hoverGroupIndex==index?'cell-hover':'']"
							v-for="(item,index) in groupList" :key="index">
							<MyIcon class="app-icon file-icon" name="File" />
							<div class="app-flex-2 cell-width">
								<span class="cell-name">{{item.title}}</span>
								<span class="cell-count">{{item.count}}</span>
							</div>
							<el-popover popper-style="padding: 0px;min-width:0px;" v-if="hoverGroupIndex==index&&index!=0"
								placement="right" :width="100" trigger="hover">
								
								<div class="back-deep">
									<div class="app-hover-cell" @click="showDialog('updateGroup',item)">修改名称</div>
									<div class="app-hover-cell" @click="showDialog('deleGroup',item)">删除分组</div>
								</div>
								<template #reference>
									<div class="cell-more">
										<MyIcon class="app-icon more-icon" name="MoreVertical" />
									</div>
								</template>
							</el-popover>
						</div>
					</div>
				</div>
			</div>
			<div class="mater-body app-container-radius">
				<div class="app-flex-left">
          <span>全部</span>
          <span class="weak-grey-font app-gap-words-left-s app-words-2">共<span class="">{{total}}</span>{{type==2?'个视频':'张图片'}}</span>
           <el-input
      v-model="searchVal"
      class="inp-w280 app-gap-words-left"
      size="large"
      @keyup.enter.native="getDataList"
      placeholder="请输入名称后请回车"
      clearable
    :suffix-icon="Search"
    />
        </div>
        <div class="inline-module" v-if="isRefresh" >
          <div class="inline-box" v-if="type!=4">
						<Upload :type="type" :groupId="groupList[activeGroupIndex].id" @getImg="getUploadImg($event, val)" />
            <div class="inline-title weak-grey-font app-flex-left">
              大小不要超过10.01M
							<!-- <el-popover width="" popper-style="padding: 0px;min-width:0px" placement="top" trigger="hover">
									<div class="app-container">
									图片大小不要超过10.01M,支持图片类型包括 jpg,jpeg,png,gif
									</div>
									<template #reference>
										<MyIcon class="question-icon weak" name="Question" />
									</template>
								</el-popover> -->
            </div>
          </div>
          <div @mouseover="item.hoverIndex=true" @mouseleave="item.hoverIndex=false" class="inline-box" v-for="(item,index) in tableData" :key="index">
          <div class="app-rel" @click="item.isSelect=!item.isSelect;handleSelect(index)">
            <el-image class="box-162" :src="(type==2||type==4)?item.cover:item.url" fit="contain" />
						<div v-if="item.isSelect" class="app-abs app-pointer check-mask">
							<MyIcon class="check-Center" name="Check" />
							<div class="check-num app-abs" v-if="item.selectIndex!='0'">{{item.selectIndex}}</div>
						</div>
          </div>
            <div class="inline-title">
              {{item.name}}
            </div>
            <div class="app-flex-2 mt-6">
              <span class="weak-grey-font app-words-1">{{item.create_time}}</span>
							<span :style="{visibility:item.hoverIndex||item.isSelect?'':'hidden'}" class="app-primary-font app-words-1 app-pointer">
							<span @click="showDialog('dele', item)">删除</span>
							<span class="app-gap-words-left-xs">|</span>
							<el-popover popper-style="padding: 0px;min-width:0px" 
								placement="top" :width="100" trigger="hover">
								<div>
									<div class="app-hover-cell" @click="showDialog('show',item)">查看</div>
									<div class="app-hover-cell" @click="showDialog('updateName',item)">重命名</div>
									<!-- <div class="app-hover-cell" @click="showDialog('editPic',item)">裁剪</div> -->
								</div>
								<template #reference>
									<span class="app-gap-words-left-xs">更多</span>
								</template>
							</el-popover>
							
							</span>
            </div>
          </div>
        </div>
			</div>
		</div>
    <UpdateGroupDialog  @diaUpdate="getGroupList" ref="updateGroupDialog" />
		<DeleGroupDialogue  @diaUpdate="getGroupList" ref="deleGroupDialogue" />
		<UpdateDialog  @diaUpdate="getGroupList" ref="updateDialog" />
		<DeleDialogue  @diaUpdate="getGroupList" ref="deleDialogue" />
		<EditPic ref="editPic" />
	</div>


</template>
<style lang="scss">
	@import url('../../../style/app-component.scss');
	@import url('../../../style/special.scss');
	@import '../../../style/mixin.scss';

	.pic-main {
		height: calc(100vh - 56px - 110px);
		display: flex;

		.file-icon {
			font-size: var(--app-font-6);
			font-weight: 800;
			color: var(--el-color-primary);
			margin-right: var(--app-block-margin);
		}

		.pic-main-left-nav {
			width: 220px;
			background: var(--app-white-back-color);
			margin-right: var(--app-block-margin);

			.pic-main-left-scroll {
				@include scrollBar;
			}
		}

		.cell-list {
			height: calc(100vh - 262px - 70px + 80px);
			overflow: auto;
			@include scrollBar;
			overflow: auto;
		}

		.cell-list-show-input {
			height: calc(100vh - 70px - 262px - var(--app-btn-height) - var(--app-container-padding) + 8px);
			overflow: auto;
			@include scrollBar;
			overflow: auto;
		}

		// table带check的样式


	}


	.mater-body {
		background: var(--app-white-back-color);
		height: calc(100vh - 70px - 64px - 110px - 22px - 50px + 56px + 92px);
		width: calc(100% - 224px);
    padding: var(--app-container-padding);
    overflow-y:auto;
  	@include scrollBar;
	}
</style>